<template>
  <a-modal class="common-modal" :title="$t('layout.editPwd')" :footer="null" :width="500" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical" class="p-20 pb-2" :label-col="{ span: 23 }" :wrapper-col="{ span: 23 }">
        <a-form-item :label="$t('layout.olePwd')" name="oldPassword">
          <a-input-password v-model:value.trim="formState.oldPassword" :placeholder="$t('common.pleaseInput')" autoComplete="new-password" />
        </a-form-item>
        <a-form-item :label="$t('layout.newPwd')" name="newPassword">
          <a-input-password v-model:value.trim="formState.newPassword" :placeholder="$t('common.pleaseInput')" autoComplete="new-password" />
        </a-form-item>
        <a-form-item :label="$t('layout.trueNewPwd')" name="confirmPwd">
          <a-input-password v-model:value.trim="formState.confirmPwd" :placeholder="$t('common.pleaseInput')" autoComplete="new-password" />
        </a-form-item>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="editPwdModal">
import { ref, nextTick } from 'vue';
import { cloneDeep } from 'lodash'
import axios from '@/utils/request';
import { message } from 'ant-design-vue';
import i18n from '@/locales/index' 
const { t } = i18n.global
let visible = ref(false)
let confirmLoading = ref(false)
let formState = ref({})
const formRef = ref()

const open = async () => {
  visible.value = true
  await nextTick()
  formState.value = {}
  formRef.value.resetFields()
}

const validatePass2 = async (_rule, value) => {
  if (value === '') {
    return Promise.reject('');
  } else if (value !== formState.value.newPassword) {
    return Promise.reject(t('layout.pwdDisunion'));
  } else {
    return Promise.resolve();
  }
};

const rules = {
  oldPassword: [{ required: true, trigger: 'change', message: t('layout.pleaseInputPwd') }],
  newPassword: [{ required: true, trigger: 'change', message: t('layout.pleaseInputNewPwd') }],
  confirmPwd: [
    { validator: validatePass2, trigger: 'change' },
    { required: true, trigger: 'change', message: t('layout.truePwd') }
  ],
};

const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields()
    let params = cloneDeep(values)
    delete params.confirmPwd
    confirmLoading.value = true
    let res = await axios.postAction('/api/system/user/profile/updatePwd', params)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg)
      handleCancel()
    }
  } catch {
    confirmLoading.value = false
    console.log('error');
  }

};
const handleCancel = () => {
  visible.value = false
}

defineExpose({
  open
})

</script>